<template>
  <div class="app-container">
    <comprehensive-table
            @selection-change="selectionChange"
            :columns="column" :data="data" @reset="reset" @onSubmit="onSubmit"  @custom-size-change="handleCustomSizeChange" @custom-select-change="handleCustomSelectChange">
      <template v-slot:btn>
       <div style="display: flex;justify-content: flex-end">
         <!-- <el-button type="primary" @click="add"><el-icon><plus /></el-icon> 添加</el-button> -->
         <el-button type="danger" @click="batchDelete"><el-icon><delete /></el-icon>批量删除</el-button>
       </div>
      </template>
      <template v-slot:sex="scope">{{scope.row.sex?'男':'女'}}</template>
      <template v-slot:operation="scope">
        <!-- <el-button
            type="primary"
            size="small"
            icon="Edit"
            @click="edit(scope.row)"
        >
          编辑
        </el-button> -->
        <el-button
             @click="del(scope.row)"
            type="danger"
            size="small"
            icon="Delete"
        >
          删除
        </el-button>
      </template>
    </comprehensive-table>

    <el-dialog
        :visible.sync="dialogVisible"
            :title="title"
            width="50%"
    >
      <el-form
              ref="ruleFormRef"
              :model="ruleForm"
              :rules="rules"
              label-width="120px"
              class="demo-ruleForm"
              :size="formSize"
      >
		<!-- 	<el-form-item label="内容" prop="content">
				<vue-editor v-model="ruleForm.content" :editorOptions="editorOptions"></vue-editor>
			</el-form-item> -->
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleClose('ruleFormRef')"
        >确定</el-button
        >
      </span>
      </template>
    </el-dialog>

  </div>
</template>
<script>
	
var dayjs = require('dayjs')
  import ComprehensiveTable from './components/comprehensive.vue'
	import axios from 'axios'
  const data = []
  
  
  const column = [
    { type:'selection', width:60 },
    { name:'id', label: 'id', valueType:'input',width:140, },
		{	name:'nickname', label: '发布人姓名',	inSearch:true,	valueType:'input',	width:180},
		// {	name:'images', label: '图片',		valueType:'input',	width:140},
		{	name:'content', label: '反馈文章', valueType:'input',width:580},
		{	name:'createTime', label: '发布时间',valueType:'input',	width:200},
		{ name:'operation',slot:true,fixed:'right',width:150 }
	 ]
  export default {
    components:{
      ComprehensiveTable,
    },
    data(){
      return{
        data,
        column,
        formSize:'default',
        ruleForm:{
          id:null,
					nickname: '',
					address:null,
					images:null,
					content:'',
					createTime:'',
        },
        rules:{
					images: [
					  {  message: '请上传头像', trigger: 'change' }
					],
					content: [
					  { required: true, message: '请输入内容', trigger: 'blur' }
					  // 其他表单项的规则...
					]
				},
				editorOptions: {
				        // 编辑器选项...
				},
        dialogVisible:false,
        title:'新增',
        rowObj:{},
        selectObj:[],
				pageSize:10,
      }
    },
		created() {
		  this.fetchData();
		},
    methods:{
			fetchData() {
			  axios.get('http://43.136.172.73/api/v1/system/FeedBack/selectAll/', {
			   
					headers:{
						Authorization:''
					}
			  })
			  .then(response => {
			    this.data = response.data;
					console.log(response);
			  })
			  .catch(error => {
			    console.error('Error:', error);
			  });
			},
			
      async handleClose(formName){
				
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (valid) {
              let obj = {
                ...this.ruleForm,
              }
							console.log(obj);
							
              if(this.title==='新增'){
								this.$message.success('修改成功');
								
              }else {
                this.data.forEach(item=>{
                  if(item.id===this.rowObj.id){
                    item.address=obj.address
                    item.closeTime=obj.closeTime
                    item.name=obj.name
										item.openTime=obj.openTime
										item.phone=obj.phone
										item.lon=obj.lon
										item.lat=obj.lat
										item.images=obj.images
                  }
				    
                });
								
              }
              this.dialogVisible = false
              // console.log('submit!',obj)
            } else {
              console.log('error submit!', fields)
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      add(){
        this.title='新增'
        this.dialogVisible = true
      },
      batchDelete(){
        if(!this.selectObj.length){
          return this.$message.error('未选中任何行')
        }
        this.$confirm(
            '你确定要删除选中项吗?',
            '温馨提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              draggable: true,
            }
        )
            .then(() => {
							console.log(this.selectObj);
							
              const idArray = [];
              this.selectObj.map(item => (idArray.push(item.id)));
							const newArr = idArray.map(item => ({"id":item}));
              console.log(newArr);
              const url = 'http://43.136.172.73/api/v1/system/FeedBack/deleteByList';
              	axios.post(url,newArr, 
              	 { headers:{
              	  	Authorization:'asd'
              	  },
              	}).then(response => {
                  // 处理成功响应
              		console.log(response);
              		this.$message.success('删除成功')
              		this.fetchData()
                })
                .catch(error => {
                  // 处理错误
                })
            })
            .catch(() => {

            })
      },
       selectionChange(val) {
		     console.log('选中项：', val);
		(val)=>emit('comprehensive',val)
         this.selectObj = val;
       },
      edit(row){
        this.title='编辑'
        this.rowObj = row
        this.dialogVisible = true
        this.ruleForm.name = row.name
				this.ruleForm.id = row.id
				this.ruleForm.phone = row.phone
		    this.ruleForm.address = row.address
        this.ruleForm.lon = row.lon
				this.ruleForm.lat = row.lat
				this.ruleForm.openTime = row.openTime
				this.ruleForm.closeTime = row.closeTime
      },
      del(row){
        this.$confirm(
            '你确定要删除当前项吗?',
            '温馨提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              draggable: true,
            }
        )
            .then(() => {
							console.log(row.id);
              const url = 'http://43.136.172.73/api/v1/system/FeedBack/delete/'+row.id+'/';
              const headers = {Authorization:'dsa'}
              	axios.delete(url, {
              	  headers: {
              	    Authorization:'dsa' 
              	  },
              	}).then(response => {
                  // 处理成功响应
              		console.log(response);
              		this.$message.success('删除成功')
              		this.fetchData()
                })
                .catch(error => {
                  // 处理错误
                })
            })
            .catch(() => {

            })
      },
      reset(){
        this.$message.success('触发重置方法')
				this.fetchData()
      },
      onSubmit(childData){
				console.log(childData);
				const obj = childData;
        			console.log(obj);
        				axios.get('http://43.136.172.73/api/v1/system/FeedBack/selectByName/'+obj.nickname, {
        					headers:{
        						Authorization:''
        					}
        				})
        				.then(response => {
        					console.log(response);
        					this.data = response.data;
        					this.$message.success('触发查询方法');
        				})
        				.catch(error => {
        					console.error('Error:', error);
        				});
        
      },
			handleCustomSizeChange(val){
				console.log(val);
				this.pageSize = val;
				console.log(this.pageSize);
				const totalPage = Math.ceil(this.totalItems / this.pageSize);
				// 处理当前页超出新的总页数的情况
				if (this.currentPage > totalPage) {
				  this.currentPage = totalPage;
				}
				
			},
			//左边选择中的id
			handleCustomSelectChange(val){
				console.log(val);
				this.selectObj = val;
			}
    }
  }

</script>
<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
